<template>
  <div class="person">
    <!-- 
      13 props
    -->
    {{ a }} {{ b }}
    <ul>
      <li v-for="(item,index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { defineProps, withDefaults } from 'vue'
import { type Persons } from '@/types'

// 接收数据
// defineProps(['a', 'b'])
// console.log(a) // a is not defined


// 接收数据并保存
// let x = defineProps(['a', 'b'])
// console.log(x.a) // 哈哈



//只接收
// defineProps(['a', 'b', 'list'])




// 接收 + 限制类型
// defineProps<{
//   list: Persons,
//   a: string,
//   b: string
// }>()



// 接收 + 限制类型 + 限制必要性 + 指定默认值(withDefaults)
withDefaults(
  defineProps<{
  list?: Persons,
  a: string,
  b: string
}>(), {
  list: () => [{id:'001',name:'xxx',age:30}],
  a:() => 'a',
  b:() => 'b'
})






</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>